<template>
  <view class="container">
    <u-navbar left-icon="back" height="50" title="工程详情"></u-navbar>
    <view class="content-top">
      <view class="info_box">
        <view class="info_box-title">
          {{ orderInfo.name }}
          <text class="info_box-title-right">{{ orderInfo.enrollCount }}人参与</text>
        </view>
        <view class="info_box-desc-time">
          <view class="info_box-desc">
            截至时间：{{ formatTime(orderInfo.enrollStartTime) }} -
            {{ formatTime(orderInfo.enrollEndTime) }}
          </view>
          <view class="info_box-time">
            项目预算：<text style="color: red"
              >¥{{ (orderInfo.budgetPrice * 0.01).toFixed(2) }}</text
            >
          </view>
        </view>

        <view class="info-floor">
          <text>
            {{ formatTime(orderInfo.createTime) }}
          </text>
        </view>
        <view class="" style="display: flex; align-items: center">
          <view class="" style="flex: 1"> </view>
          <view
            v-if="isShowMobile"
            @click="onMobile"
            class="info-floor-btn"
            style="background-color: #8cc340"
          >
            电话咨询
          </view>

          <text v-if="!isShowMobile" style="font-size: 26rpx; color: #999">
            报名后获取联系方式
          </text>
          <view
            v-if="!isShowMobile"
            class="info-floor-btn"
            style="background-color: #008ed6"
            @click="routeTo"
          >
            立即报名
          </view>
        </view>
      </view>
    </view>
    <view class="content-desc">
      <view class=""> 项目地址：{{ orderInfo.provinceCityArea }} </view>
      <!-- <view class="">
				项目周期：{{formatTime(orderInfo.exceptStartTime)}}
			</view> -->
      项目简述：
      <u-read-more show-height="300">
        <rich-text :nodes="orderInfo.introduction"></rich-text>
      </u-read-more>
    </view>
    <view class="content-desc">
      <view class=""> 项目要求： </view>
      <view class="">
        {{ orderInfo.requireCondition }}
      </view>
    </view>

    <view class="content-imgs">
      <view class="" style="margin-bottom: 15rpx">施工现场:</view>
      <view class="img-group">
        <image class="case-img" v-for="item in orderInfo.picUrls" :src="item" alt="" />
      </view>
    </view>

    <u-popup v-model="show" width="650" heigth="500" mode="center">
      <view class="">
        <view class="" style="text-align: center">
          你当前的身份不是施工队，暂时不能报名，请先成为施工队
        </view>

        <view class="" style="display: flex; justify-content: space-between">
          <view class="color:#666666"> 暂不考虑 </view>
          <view class="" style="color: #008ed6"> 申请入驻 </view>
        </view>
      </view>
    </u-popup>

    <u-popup v-model="showDse" width="650" heigth="500" mode="center">
      <view class="">
        <view class="" style="padding: 15rpx; line-height: 45rpx">
          <p>施工信息免责及付费声明</p>
          <p>尊敬的用户：</p>
          <view class="">
            欢迎您使用体育圈，为了保障您的权益，特别提供以下免责及 付费声明，请您仔细阅读。<br />
            一、施工信息免责声明<br />
            1.本平台上展示的施工信息、价格等内容，均由需求方自行提供，
            平台仅作为信息发布平台，并不涉及施工过程。因此平台不对
            需求方提供的信息的真实性、准确性、合法性、有效性做出
            保证，也不承担任何因此引起的法律责任。<br />
            2.由于施工过程的所有环节均由施工队负责，因此，如出现施工
            质量问题等问题，平台不承担任何责任。需求方需与施工队自行 协商解决。<br />
            二、信息服务费付费声明<br />
            1.关于收取施工队报名费的问题，平台仅作为信息发布平台，在
            施工队报名项目时收取一定的信息服务费用于平台运营的费用。
            每个施工队报名任何一个时都将收取该费用，施工队付费以后 即可与需求方进行联系。<text
              style="font-weight: 700"
              >一经付费平台概不退还。</text
            ><br />
            三、其他免责声明<br />
            1.平台保留随时修改、更新本免责声明的权利。
            2.对于因平台故障、系统缺陷、第三方软件等原因造成的任何损失， 平台不承担任何责任。<br />

            <text style="font-weight: 700">请您仔细阅读本免责声明</text
            >，如有任何疑问或建议，请联系客服人员。
            在您使用体育圈平台的过程中，如有任何纠纷或争议，应以协商解决
            为主。如协商不成，应向管辖权的法院起诉解决。<br />

            感谢您的支持和谅解！<br />
          </view>
        </view>

        <view class="" style="display: flex; flex-direction: column; align-items: center">
          <view
            @click="showDse = false"
            style="
              margin: 15rpx 0;
              width: 600rpx;
              text-align: center;
              line-height: 68rpx;
              height: 68rpx;
              border-radius: 60rpx;
              background-color: #999999;
              color: #fff;
            "
          >
            暂不报名
          </view>
          <view
            @click="onSubimt"
            style="
              margin: 15rpx 0;
              width: 600rpx;
              text-align: center;
              line-height: 68rpx;
              height: 68rpx;
              border-radius: 60rpx;
              background-color: #008ed6;
              color: #fff;
            "
          >
            我已阅读声明，继续报名
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDse: false,
      show: false,
      isConstruction: false,
      orderInfo: {},
      isShowMobile: '',
      content: ``,
      userId: '',
      id: ''
    }
  },
  onLoad(options) {
    if (uni.getStorageSync('userInfo')) {
      this.userId = uni.getStorageSync('userInfo').id
    }

    // if(options.isShowMobile){
    // 	this.isShowMobile = true
    // }
    this.id = options.id
    this.$u.get('/app-api/construction/project-info/get?id=' + options.id).then((res) => {
      this.orderInfo = res.data
    })
  },
  onShow() {
    this.$u
      .get(
        `/app-api/construction/project-enroll/list?pageNo=${1}&pageSize=${10}&projectId=${
          this.id
        }&payed=true`
      )
      .then((res) => {
        res.data.forEach((item) => {
          if (item.userId == this.userId) {
            this.isShowMobile = true
          }
        })
      })
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  methods: {
    onLocation() {
      this.initData()
    },
    queryList(page, pageSize) {
      let self = this
      self.$u.api
        .getPickupLocker({
          page: page,
          lat: this.latitude,
          lng: this.longitude
        })
        .then((res) => {
          self.$refs.paging.complete(res.list)
        })
        .catch((res) => {
          self.$refs.paging.complete()
        })
    },
    onSelected(item) {
      this.pickupInfo = item
      this.boxesList = item.boxes
      this.addressShow = true
    },
    onSetBoxes(item) {
      this.boxesList.forEach((item) => {
        item.selected = false
      })
      item.selected = true
      this.boxesNum = item.number
      this.$forceUpdate()
    },
    onSubimt() {
      this.showDse = false
      uni.navigateTo({
        url: '/other/apply-construction/apply-construction?id=' + this.orderInfo.id
      })
    },
    routeTo() {
      this.$u.get('/app-api/construction/resume/check').then((res) => {
        if (res.data.step == 3) {
          this.showDse = true
        } else {
          uni.navigateTo({
            url: '/other/apply-construction-team/apply-construction-team'
          })
        }
      })
    },
    onMobile() {
      uni.makePhoneCall({
        phoneNumber: this.orderInfo.consultContact
      })
    }
  }
}
</script>

<style>
page {
  height: 100%;
  background: #eeeeef;
}

.container {
  padding: 20rpx;
}

.info_box {
  width: 700rpx;
  background-color: #ffffff;
  padding: 15rpx;
}

.info_box-top {
  overflow: auto;
}

.info_box-desc-time {
  margin-bottom: 20rpx;
  line-height: 43rpx;
  font-size: 32rpx;
}

.info_box-address {
  font-size: 27rpx;
  color: #666666;
}

.info-floor {
  margin: 18rpx 0;
  position: relative;
  font-size: 30rpx;
  color: #999999;
}

.info_box-top-left {
  position: relative;
  line-height: 46rpx;
}
.info-floor-right {
  position: absolute;
  top: 0;
  right: 2rpx;
}
.info-top-left-price {
  color: #f54831;
  margin-left: 10rpx;
}
.info-top-left-tip {
  display: inline-block;
  font-size: 23rpx;
  border: #0f76bc solid 1px;
  color: #0f76bc;
  padding: 0 5rpx;
}

.info_box-title {
  position: relative;
  font-size: 45rpx;
  margin: 15rpx 0;
}
.info_box-title-right {
  position: absolute;
  top: -25rpx;
  right: 0;
  font-size: 28rpx;
  color: #999999;
}
.info-floor-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  color: #ffffff;
  border-radius: 30rpx;
  margin: 0 8rpx;
}
.content-desc {
  margin-top: 15rpx;
  padding: 15rpx;
  background-color: #fff;
}
.img-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.case-img {
  width: 700rpx;
  border-radius: 10rpx;
  margin-bottom: 15rpx;
}
</style>
